<template>
    <div class="question">
        <div class="order_msg">
            <span class="number f26">订单号：{{item.orderNo}}</span>
            <span class="state f26">{{item.status}} <i class="icon iconfont icon-changyonggoupiaorenshanchu" v-if="item.status == '已取消' | item.status == '已完成'"></i></span>
        </div>
        <dl class="pay_msg">
            <dt>
                <img :src="item.photo | hasdomain" alt="">
            </dt>
            <dd>
                <p><span class="type f26">{{item.questions}}</span><span class="price f26">￥{{item.totalPrice ? item.totalPrice : item.totalMoney}}</span></p>
                <h3 class="master f30">{{item.masterName ? item.masterName : item.userName}}</h3>
                <div class="time f24">
                    {{item.createtime}}
                </div>
            </dd>
        </dl>
        <div class="operate">
            <button v-if="item.status == '待付款' & !$store.state.isMaster" @click="payment(item.serviceorderId)">立即支付</button>
            <button v-if="(item.status == '进行中' & isMar) | (item.status == '待评价' & isMar) | (item.status == '已完成' & isMar) | item.status == '待回复'" @click="goutong()">查看详情</button>
            <button v-if="item.status == '待确认' & $store.state.isMaster" @click="accept('接单', item.consultanceid)">确认接单</button>
            <button v-if="item.status == '待确认' & $store.state.isMaster" @click="accept('拒接', item.consultanceid)">拒绝接单</button>
            <button v-if="(!isMar & item.status == '进行中') | (!isMar & item.status == '待评价') | (!isMar & item.status == '已取消') | (item.status == '已完成' & !isMar)" @click="goMasterList(item.serviceorderId, item.orderNo)">查看详情</button>
            <!-- <button>{{operation}}</button> -->
            <span v-if="item.commentText">拒绝原因：{{item.commentText}}</span>
        </div>
    </div>
</template>

<script>
    import Bus from '../bus/bus.js'
    export default {
        name: 'question',
        props: {
            item: Object
        },
        data() {
            return {
                operation: '查看资料',
                isMar: this.$store.state.isMaster
            }
        },
        methods: {
            setBtn() {
                let datas = this.item
                let sta = datas.status;
                switch(sta) {
                    case '已取消':
                    this.operation = '重新下单';
                    break;
                    case '待完善资料':
                    this.operation = '查看详情';
                    break;
                    case '待回复':
                    this.operation = '查看资料';
                    break;
                    case '已完成':
                    this.operation = '查看详情';
                    break;
                    case '待付款':
                    this.operation = '取消订单';
                    break;
                }
            },
            goutong() {
                this.$router.push({
                    path: '/flashAsked',
                    query: {
                        ding: this.item.consultanceid,
                        id: this.item.masterId,
                        isMaster: this.$store.state.isMaster,
                        status: this.item.status
                    }
                })
            },
            payment(id) {
                this.$router.push({
                    path: '/pay',
                    query: {
                        step: 1,
                        id: id,
                        from: 'qa',
                    }
                })
            },
            accept(type, id) {
                let obj = {
                    type: type,
                    consultanceid: id
                }
                Bus.$emit('accept', obj)
            },
            goMasterList(consultanceid, orderNo) {
                this.$router.push({
                    path: '/flashMaster',
                    query: {
                        cid: consultanceid,
                        oNo: orderNo
                    }
                })
            }
        },
        mounted() {
            this.setBtn()
        }
    }
</script>

<style lang='less' scoped>
    .question{
        .padd(0, 20);
        background: #fff;
        box-sizing: border-box;
        .mb(20);
        .order_msg{
            width: 100%;
            .lh(64);
            display: flex;
            justify-content: space-between;
            .number{
                color: #333;
            }
            .state{
                color: #666;
            }
        }
        .pay_msg{
            display: flex;
            border-bottom: 1px solid #f2f2f2;
            .pb(10);
            dt{
                .w(160);
                img{
                    width: 100%;
                }
            }
            dd{
                flex: 1;
                .pl(20);
                box-sizing: border-box;
                p{
                    display: flex;
                    justify-content: space-between;
                    .lh(60);
                    .price{
                        color: #E73828;
                    }
                }
                h3{
                    .lh(50);
                    font-weight: normal;
                }
                .time{
                    .lh(60);
                }
            }
        }
        .operate{
            .h(88);
            .lh(88);
            text-align: right;
            button{
                .ml(20);
                border: none;
                background: #fff;
                border: 1px solid #666;
                .h(56);
                .w(160);
                border-radius: 5px;
                color: #666;
                display: inline-block;
                &:nth-child(1){
                    color: #189BEB;
                    border-color: #189BEB;
                }
            }
            .btn_on{
                color: #189BEB;
                border-color: #189BEB;
            }
            span{
                float: left;
            }
        }
    }
</style>
